<template>
  <div class="configure-server">
    <a-card :bordered="false" class="optional">
      <div class="optional_main">
        <span class="optional_title">计费方式</span>
        <div class="optional_tab" :style="tabKey === 'monthTab' ? styleObject : null" @click="changeTabKey('monthTab')">
          <span class="optional_tab_h3">包年包月</span>
          <span class="optional_tab_explain">（预付费，优惠更多）</span>
        </div>
        <div class="optional_tab" :style="tabKey === 'hourTab' ? styleObject : null" @click="changeTabKey('hourTab')">
          <span class="optional_tab_h3">按使用量计费（小时）</span>
          <span class="optional_tab_explain">（后付费，每小时自动扣费）</span>
        </div>
      </div>
      <div class="explain">
        按量付费+节省计划，价格跟包年包月相近，支持分期付款，资源使用更加灵活。
      </div>
    </a-card>
    <a-card :bordered="false" class="station">
      <div class="station_main">
        <span class="optional_title">站点</span>
        <div
          v-for="item in menuListToOptionNotAll(stationAll)"
          :key="item.key"
          class="optional_tab_station"
          :style="stationTabKey === item.key ? styleObject : null"
          @click="changeStationTabKey(item)"
        >
          <div>
            <span>
              <ellipsis :length="20" tooltip>{{ item.name }}</ellipsis>
            </span>
          </div>
        </div>
        <warn-alter :style="{ display: dispalyWarnStation ? 'block' : 'none' }" :marginLeft="4">
          <template slot="extra">请选择适合您的站点</template>
        </warn-alter>
      </div>
      <div class="explain">
        不同地域的实例之间内网互不相通；选择靠近您客户的地域，可降低网络时延、提高您客户的访问速度。
      </div>
    </a-card>
    <a-card :bordered="false" class="gpu">
      <div class="gpu_main">
        <span class="optional_title">规格配置</span>
        <div class="optional_tab_index">规格名称：</div>
        <div class="gpu_search_button">
          <a-input
            v-model="gpuSearchName"
            autocomplete="off"
            :maxLength="14"
            class="gpu_search_button_out"
            @pressEnter="handleGpuSearchName"
          >
            <img
              slot="suffix"
              src="~@/assets/image/product/cloudServer/search.png"
              class="gpu_search_button_logo"
              alt="logo"
              @click.stop="handleGpuSearchName"
            />
          </a-input>
        </div>
      </div>
      <div class="gpu_table">
        <a-table
          v-if="selectedKeyFlag"
          key="selectedKeyFlagTrue"
          :bordered="false"
          :row-key="(record, index) => record.id + index"
          :loading="loadingGpu"
          :columns="columns"
          :data-source="gpuInfoList"
          :pagination="false"
          style="width: 850px"
          :row-selection="rowSelection"
          :locale="{ emptyText: '暂无可选服务器' }"
        >
          <span slot="gpuProductName" slot-scope="text">
            <ellipsis :length="32" tooltip>{{ text }}</ellipsis>
          </span>
          <span slot="cpuSize" slot-scope="text">
            <ellipsis :length="18" tooltip>{{ text + 'CPU' }}</ellipsis>
          </span>
          <span slot="memorySize" slot-scope="text">
            <ellipsis :length="18" tooltip>{{ text + 'GB' }}</ellipsis>
          </span>
          <span slot="price" slot-scope="text">
            <ellipsis :length="26" tooltip>{{ priceUnitFilter(text) }}</ellipsis>
          </span>
        </a-table>
        <a-table
          v-if="!selectedKeyFlag"
          key="selectedKeyFlagFalse"
          :bordered="false"
          :row-key="(record, index) => record.id + index"
          :loading="loadingGpu"
          :columns="columns"
          :data-source="gpuInfoList"
          :pagination="false"
          style="width: 850px"
          :row-selection="rowSelection"
          :locale="{ emptyText: '暂无可选服务器' }"
        >
          <span slot="gpuProductName" slot-scope="text">
            <ellipsis :length="32" tooltip>{{ text }}</ellipsis>
          </span>
          <span slot="cpuSize" slot-scope="text">
            <ellipsis :length="18" tooltip>{{ text + 'CPU' }}</ellipsis>
          </span>
          <span slot="memorySize" slot-scope="text">
            <ellipsis :length="18" tooltip>{{ text + 'GB' }}</ellipsis>
          </span>
          <span slot="price" slot-scope="text">
            <ellipsis :length="26" tooltip>{{ priceUnitFilter(text) }}</ellipsis>
          </span>
        </a-table>
      </div>
      <div class="gpu_detial">
        <div>
          当前所选规格： {{ selectedRows && selectedRows.gpuProductName ? selectedRows.gpuProductName : ' ' }} ({{
            selectedRows && selectedRows.cpuSize ? selectedRows.cpuSize + 'CPU, ' : ' '
          }}{{ selectedRows && selectedRows.memorySize ? selectedRows.memorySize + 'GB内存' : ' ' }})
        </div>
        <warn-alter :style="{ display: dispalyWarnRows ? 'block' : 'none' }" :marginLeft="4">
          <template slot="extra">请选择适合您的规格配置</template>
        </warn-alter>
      </div>
    </a-card>
    <a-card :bordered="false" class="system">
      <div class="system_main">
        <span class="optional_title">镜像</span>
        <div class="system_tab_index">操作系统：</div>
        <a-select style="width: 180px; height: 30px; marginRight: 6px" @change="handleSysFrameChange">
          <a-select-option v-for="item in dictionaryToOptionNotAll(osAll)" :key="item.key" :value="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select>

        <a-select v-model="secondSysVersionValue" style="width: 180px; height: 30px;" @change="handleSysVersionChange">
          <a-select-option v-for="item in dictionaryToOptionNotAll(sysVersions)" :key="item.key" :value="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select>
        <warn-alter :style="{ display: dispalyWarnSys ? 'block' : 'none' }" :marginLeft="16">
          <template slot="extra">请选择适合您的操作系统</template>
        </warn-alter>
      </div>
      <div class="explain">
        信息高铁镜像针对 ECS 进行深度优化，提供更佳的性能和体验。
      </div>
    </a-card>
    <a-card :bordered="false" class="storage">
      <div class="storage_main">
        <span class="optional_title">存储</span>
        <div class="storage_tab_index">
          <a-select
            :disabled="true"
            :value="storageType || null"
            style="width: 180px; height: 30px; marginRight: 7px"
            @change="handleStorageChange"
          >
            <a-select-option v-for="item in dictionaryToOptionNotAll(storageAll)" :key="item.key" :value="item.value">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </div>
        <count-input
          class="storage_input_block"
          :maxValue="20480"
          :minValue="20"
          :defaultValue="storageSize"
          :width="120"
          @handleInputValue="handleStorageSize"
        />
        <span>GB</span>
        <span style="fontSize: 12px; marginLeft: 16px; color: #5c5c5c;">容量最小值是20GB</span>
        <warn-alter :style="{ display: dispalyWarnStorage ? 'block' : 'none' }" :marginLeft="38">
          <template slot="extra">请选择适合您的存储</template>
        </warn-alter>
      </div>
    </a-card>
    <a-card :bordered="false" class="ip">
      <div class="ip_main">
        <span class="optional_title">弹性IP</span>
        <div class="ip_tab_index">
          <a-checkbox @change="onIpChange">
            <div
              style="width: 103px; height: 30px; lineHeight: 30px; textAlign: center; fontSize: 12px; borderRadius: 2px; border: solid 1px #e1e5ee;"
            >
              分配弹性公网IP
            </div>
          </a-checkbox>
        </div>
      </div>
      <div class="explain">
        可采用更加灵活的弹性公网 IP 方案和直通IP方案
      </div>
      <div class="ip_input" :style="{ display: ipDisplay ? 'flex' : 'none' }">
        <div class="ip_input_index">公网带宽：</div>
        <count-input :maxValue="1000" :minValue="1" :defaultValue="1" :width="138" @handleInputValue="handleIpSize" />
        <div style="margin-left: 5px">M</div>
      </div>
    </a-card>
    <a-card :bordered="false" class="name">
      <div class="name_main">
        <span class="name_main_title">云服务器名称（可选）</span>
        <div class="name_main_input">
          <a-input v-model="serverName" placeholder="云服务器" :maxLength="20" @blur="handleServerName" />
        </div>
        <img src="~@/assets/image/product/cloudServer/edit.png" class="name_main_logo" alt="logo" />
        <warn-alter :style="{ display: dispalyWarnServerName ? 'block' : 'none' }" :marginLeft="38">
          <template slot="extra">输入名称格式有误</template>
        </warn-alter>
      </div>
      <div class="name_explain">
        目前名称最大可输入20个字符，格式支持中文，英文字母，数字，与下划线“-”
      </div>
    </a-card>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { Ellipsis } from '@/components'
import CountInput from '../../CountInput'
import WarnAlter from '../../WarnAlter'
import { specConfigId } from '@/api/Product/cloudServer'
const monthColumns = [
  {
    title: '名称',
    dataIndex: 'gpuProductName',
    width: '220px',
    scopedSlots: { customRender: 'gpuProductName' }
  },
  {
    title: 'CPU',
    dataIndex: 'cpuSize',
    width: '160px',
    scopedSlots: { customRender: 'cpuSize' }
  },
  {
    title: '内存',
    dataIndex: 'memorySize',
    width: '170px',
    scopedSlots: { customRender: 'memorySize' }
  },
  {
    title: '费用',
    dataIndex: 'annualMonthlyPrice',
    width: '230px',
    scopedSlots: { customRender: 'price' }
  }
]
const hourColumns = [
  {
    title: '名称',
    dataIndex: 'gpuProductName',
    width: '220px',
    scopedSlots: { customRender: 'gpuProductName' }
  },
  {
    title: 'CPU',
    dataIndex: 'cpuSize',
    width: '160px',
    scopedSlots: { customRender: 'cpuSize' }
  },
  {
    title: '内存',
    dataIndex: 'memorySize',
    width: '170px',
    scopedSlots: { customRender: 'memorySize' }
  },
  {
    title: '费用',
    dataIndex: 'hourlyPrice',
    width: '230px',
    scopedSlots: { customRender: 'price' }
  }
]
export default {
  name: 'ConfigureServer',
  components: {
    Ellipsis,
    CountInput,
    WarnAlter
  },
  props: {
    // 产品id
    productId: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      styleObject: {
        backgroundColor: '#e6f2ff',
        border: 'solid 1px #75c6ee'
      },
      tabKey: 'monthTab', // 按周期购买的标签
      columns: monthColumns,
      stationTabKey: '', // 站点的标签
      gpuTabKey: '', // GPU的标签
      gpuSearchName: '',
      gpuInfoList: [], // 查询到的GPU列表
      selectedRows: null, // 具体的GPU
      selectedKeyFlag: true,
      // 一下以下是几个warn是否展示，单独写
      dispalyWarnStation: false,
      dispalyWarnRows: false,
      dispalyWarnSys: false,
      dispalyWarnStorage: false,
      dispalyWarnServerName: false,
      // 镜像
      // 以下是操作系统部分的参数开始
      firstSysFrame: null, // sys二级联动-框架选项的默认值
      sysVersions: [], // sys二级联动-版本的对应二级选项
      secondSysVersion: null, // sys二级联动-版本的对应二级选项的默认值对象
      secondSysVersionValue: null, // sys二级联动-版本的对应二级选项的默认值
      // 以上是操作系统部分的参数结束
      // 存储
      storageType: null, // 存储类型
      storageSize: 20, // 存储大小
      ipDisplay: false, // 是否选择弹性IP
      ipSize: 1, // 宽带的大小
      serverName: '' // 服务器名称
    }
  },
  computed: {
    ...mapState({
      productId: state => state.cloudServer.productId || null, // 产品id
      osAll: state => state.cloudServer.dictionary['OS'] || [], // 操作系统
      osVersionAll: state => state.cloudServer.dictionary['OS_VERSION'] || [], // 操作系统版本
      storageAll: state => state.cloudServer.dictionary['STORAGE_TYPE'] || [], // 存储类型
      loadingGpu: state => state.cloudServer.loadingGpu,
      stationAll: state => state.cloudServer.stationAll || []
    }),
    // GPU具体选项
    rowSelection() {
      const that = this
      return {
        type: 'radio',
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(selectedRowKeys, selectedRows)
          that.selectedRows = selectedRows[0]
          this.$emit('handleConfigureBase', selectedRows[0])
          // 查询出具体的资源池，拿到存储类型
          if (selectedRows[0] && selectedRows[0].id) {
            const configId = selectedRows[0].id
            console.log(configId, '-----------------')
            specConfigId({ specConfigId: configId }).then(res => {
              console.log(res)
              that.storageType =
                res && res.data && res.data.storageType !== null && res.data.storageType !== undefined
                  ? res.data.storageType
                  : null
              const storageItem = { id: res.data.storageType || null, name: res.data.storageTypeName || null }
              that.$emit('handleStorageType', storageItem)
              that.$emit('handleStorageSize', that.storageSize)
            })
          }
        }
      }
    }
  },
  watch: {
    selectedRows: function(newValue, oldvalue) {
      console.log(oldvalue, newValue)
      if (newValue === null || newValue === undefined || newValue.length === 0) {
        this.dispalyWarnRows = true
      } else {
        this.dispalyWarnRows = false
      }
    },
    // 站点标签
    stationTabKey: function(newValue, oldvalue) {
      console.log(oldvalue, newValue)
      if (newValue === null || newValue === undefined || newValue.length === 0) {
        this.dispalyWarnStation = true
      } else {
        this.dispalyWarnStation = false
      }
      this.selectedRows = null // 具体的GPU
      this.storageType = null
      this.selectedKeyFlag = !this.selectedKeyFlag
    },
    // 操作系统标签
    firstSysFrame: function(newValue, oldvalue) {
      console.log(oldvalue, newValue)
      if (newValue === null || newValue === undefined || newValue.length === 0) {
        this.dispalyWarnSys = true
      } else {
        this.dispalyWarnSys = false
      }
    },
    // 操作系统标签
    secondSysVersion: function(newValue, oldvalue) {
      console.log(oldvalue, newValue)
      if (newValue === null || newValue === undefined || newValue.length === 0) {
        this.dispalyWarnSys = true
      } else {
        this.dispalyWarnSys = false
      }
    },
    storageType: function(newValue, oldvalue) {
      console.log(oldvalue, newValue)
      if (newValue === null || newValue === undefined || newValue.length === 0) {
        this.dispalyWarnStorage = true
      } else {
        this.dispalyWarnStorage = false
      }
    }
  },
  mounted() {
    // const obj = {
    //   tabKeyId: this.tabKey, // 计费方式
    //   stationTabKeyId: this.stationTabKey, //	站点ID
    //   gpuName: this.gpuSearchName // 模糊查询GPU名称
    // }
    // this.getGpuData(obj)
    this.dictionaryByType()
    this.initStation()
  },
  methods: {
    ...mapActions(['dictionaryByType', 'gpuOfStationInfo', 'getSationList', 'externalType']),
    dictionaryToOptionNotAll(list) {
      const result = []
      if (!list || list.length === 0) return result
      for (let i = 0; i < list.length; i++) {
        const item = list[i]
        result.push({ key: item.id, name: item.name, value: item.id })
      }
      return result
    },
    // 购买方式切换
    changeTabKey(value) {
      this.tabKey = value
      this.columns = value === 'monthTab' ? monthColumns : hourColumns
      this.$forceUpdate()
      this.$emit('changeTabKey', value)
    },
    menuListToOptionNotAll(list) {
      const result = []
      if (!list || list.length === 0) return result
      for (let i = 0; i < list.length; i++) {
        const item = list[i]
        result.push({ key: item.id, name: item.name, value: item.id })
      }
      return result
    },
    // 站点切换
    changeStationTabKey(item) {
      this.stationTabKey = item.key
      this.$emit('changeStationTab', item)
      // 查询出gpu的tab
      const stationId = item.value
      const obj = { stationId: stationId, externalType: 'GPU', productId: this.productId }
      this.externalType(obj)
      this.getGpuData()
    },
    // 查询所有站点
    initStation() {
      const productId = this.productId
      this.getSationList({ productId })
    },
    // 查询GPU列表
    getGpuData() {
      const { gpuOfStationInfo } = this
      const obj = {}
      obj.productId = this.productId
      if (this.gpuSearchName) {
        obj.name = this.gpuSearchName
      } // 模糊查询规格配置名称
      if (this.stationTabKey) {
        obj.stationId = this.stationTabKey
      } //	站点ID
      gpuOfStationInfo(obj)
        .then(res => {
          console.log(res.data)
          const gpuInfoList = res.data && res.data.rows ? res.data.rows : []
          gpuInfoList.forEach((item, index, arr) => {
            arr[index] = {
              ...item,
              id: item.id,
              gpuProductName: item.name || '',
              cpuSize: item.cpuCore || '',
              memorySize: item.memoryCapacity || '',
              gpuType: item.acceleratorTypeId,
              gpuTypeName: item.acceleratorTypeName,
              hourlyPrice: item.hourlyPrice,
              annualMonthlyPrice: item.annualMonthlyPrice
            }
          })
          this.gpuInfoList = gpuInfoList
        })
        .catch(err => this.$$error(err))
        .finally(() => {})
    },
    // 模糊搜索GPU名称
    handleGpuSearchName() {
      this.getGpuData()
    },
    // 算力豆单价的单位
    priceUnitFilter(type) {
      if (this.tabKey === 'monthTab') {
        return type + '算力豆/月'
      } else {
        return type + '算力豆/小时'
      }
    },
    // 操作系统框架的select二级联动的选项
    handleSysFrameChange(value) {
      const osVersionAll = this.osVersionAll
      const osVersionAllTemp = osVersionAll.filter(item => {
        if (item.parentId === value) {
          return item
        }
      })
      const ItemValue = this.osAll.find(item => {
        return item.id === value
      })
      this.firstSysFrame = ItemValue // 一级选项

      this.sysVersions = osVersionAllTemp || []
      const secondSysVersion = osVersionAllTemp[0] ? osVersionAllTemp[0] : ''
      this.secondSysVersion = secondSysVersion
      this.secondSysVersionValue = secondSysVersion && secondSysVersion.id ? secondSysVersion.id : null
      this.$emit('handleSysImageType', ItemValue)
      this.$emit('handleSysImageVersion', secondSysVersion)
    },
    // 操作系统框架的select二级联动的选项-子选项
    handleSysVersionChange(value) {
      const ItemValue = this.sysVersions.find(item => {
        return item.id === value
      })
      this.secondSysVersion = ItemValue
      this.secondSysVersionValue = ItemValue && ItemValue.id ? ItemValue.id : null
      this.$emit('handleSysImageVersion', ItemValue)
    },
    // 存储类型-------这里类型是不可变的，因为站点-规格 确定唯一的资源池，资源池的存储类型唯一，这个方法不会触发的
    handleStorageChange(value) {
      this.$emit('handleStorageType', value)
    },
    // 存储大小
    handleStorageSize(value) {
      this.storageSize = value
      this.$emit('handleStorageSize', value)
    },
    // 是否勾选弹性公网IP
    onIpChange(e) {
      this.ipDisplay = e.target.checked
      if (e.target.checked) {
        this.$emit('handleFlexibleIpSize', this.ipSize)
      } else {
        this.$emit('handleFlexibleIpSize', null)
      }
    },
    // 弹性IP大小
    handleIpSize(value) {
      this.ipSize = value
      this.$emit('handleFlexibleIpSize', value)
    },
    // 输入校验
    handleServerNameChange(e) {
      const regex = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/
      if (e.target.value === undefined || e.target.value === null || e.target.value.length === 0) {
        this.dispalyWarnServerName = false
      } else if (!regex.test(e.target.value)) {
        this.dispalyWarnServerName = true
      } else {
        this.dispalyWarnServerName = false
      }
    },
    // 服务器名称
    handleServerName(e) {
      const value = e.target.value
      this.$emit('handleServerName', value)
    }
  }
}
</script>

<style lang="less" scoped>
.configure-server {
  width: 100%;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  /deep/.ant-card-body {
    padding: 20px 0 20px 30px;
    margin-bottom: 8px;
  }
  .optional_title {
    height: 14px;
    width: 56px;
    margin-right: 40px;
    font-size: 14px;
    line-height: 14px;
    color: #333333;
  }
  .explain {
    margin: 12px 0 0 96px;
    height: 12px;
    font-size: 12px;
    line-height: 12px;
    color: #5c5c5c;
  }
  .optional_main {
    display: flex;
    align-items: center;
    .optional_tab {
      width: 200px;
      height: 56px;
      margin-right: 10px;
      border-radius: 2px;
      border: solid 1px #e1e5ee;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .optional_tab_h3 {
        height: 14px;
        width: 100%;
        text-align: center;
        line-height: 14px;
        color: #333333;
        margin-bottom: 6px;
      }
      .optional_tab_explain {
        width: 100%;
        text-align: center;
        height: 12px;
        font-size: 12px;
        line-height: 12px;
        color: #5c5c5c;
      }
    }
    .optional_tab:hover {
      cursor: pointer;
    }
  }
  .station_main {
    display: flex;
    align-items: center;
    .optional_tab_index {
      width: 72px;
      height: 14px;
      font-size: 14px;
      line-height: 14px;
      color: #333333;
      margin-right: 8px;
    }
    .optional_tab_station {
      height: 30px;
      padding: 9px 14px;
      margin-right: 8px;
      border-radius: 2px;
      border: solid 1px #e1e5ee;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #333333;
    }
    .optional_tab_station:hover {
      cursor: pointer;
    }
  }
  .gpu {
    .gpu_main {
      height: 30px;
      display: flex;
      align-items: center;
      .gpu_search_button {
        .gpu_search_button_out {
          /deep/.ant-input {
            width: 256px;
            height: 30px;
            border-radius: 2px;
            border: solid 1px #e1e5ee;
            padding: 5px 5px;
          }
          /deep/.ant-input-suffix {
            width: 48px;
            height: 30px;
            right: 0;
          }
          /deep/.ant-input-suffix:hover {
            cursor: pointer;
          }
        }
      }
    }
    .gpu_search {
      margin: 12px 0 0 96px;
      display: flex;
      align-items: center;
      .gpu_search_index {
        width: 70px;
        height: 14px;
        font-size: 14px;
        line-height: 14px;
        color: #333333;
      }
    }
    .gpu_table {
      height: 245px;
      color: #333333;
      margin: 12px 0 0 96px;
      /deep/.ant-table-row {
        height: 50px;
        font-size: 12px;
      }
      /deep/.ant-table-body {
        //overflow: scroll;
        max-height: 200px;
        overflow-x: hidden;
      }
      /deep/.ant-table-thead > tr > th {
        padding: 12px 16px 11px 16px;
        font-size: 14px;
        overflow-wrap: break-word;
      }
      /deep/.ant-table-tbody > tr > td {
        padding: 14px 16px;
        font-size: 12px;
        overflow-wrap: break-word;
      }
      /deep/ .ant-table-row-cell-break-word:last-child {
        width: 100px;
      }
      .gpu_table_choice {
        width: 18px;
        height: 18px;
      }
      .gpu_table_choice:hover {
        cursor: pointer;
      }
    }
    .gpu_detial {
      margin: 12px 0 0 96px;
      display: flex;
      align-items: center;
      padding-left: 24px;
      width: 850px;
      height: 48px;
      line-height: 40px;
      background-color: #f6f8fd;
      border-radius: 2px;
      font-size: 14px;
      border-left: 4px solid #33b0ed;
    }
  }
  .system {
    .system_tab_index {
      width: 97px;
    }
    .system_main {
      display: flex;
      align-items: center;
      .optional_tab_gpu {
        height: 30px;
        padding: 9px 27px;
        margin-right: 8px;
        border-radius: 2px;
        border: solid 1px #e1e5ee;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #333333;
      }
    }
    .system_sys {
      display: flex;
      align-items: center;
      margin: 12px 0 0 96px;
    }
  }
  .storage {
    .storage_main {
      display: flex;
      align-items: center;
      .optional_tab_gpu {
        height: 30px;
        padding: 9px 27px;
        margin-right: 8px;
        border-radius: 2px;
        border: solid 1px #e1e5ee;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #333333;
      }
    }
  }
  .ip {
    .ip_main {
      display: flex;
      align-items: center;
      /deep/.ant-checkbox-wrapper {
        display: flex;
        align-items: center;
      }
    }
    .ip_input_index {
      width: 70px;
      margin-right: 11px;
    }
    .ip_input {
      display: flex;
      align-items: center;
      margin: 12px 0 0 96px;
    }
  }
  .name {
    .name_main {
      display: flex;
      align-items: center;
    }
    .name_main_title {
      height: 14px;
      width: 140px;
      margin-right: 14px;
      font-size: 14px;
      line-height: 14px;
      color: #333333;
    }
    .name_main_input {
      /deep/.ant-input {
        width: 400px;
        border: none;
        padding: 8px 0;
        border-bottom: 1px solid #c4c8d3;
      }
      /deep/.ant-input:focus {
        border: none;
        border-bottom: 1px solid #c4c8d3;
        box-shadow: none;
      }
    }
    .name_main_logo {
      margin-left: 10px;
      width: 20px;
      height: 20px;
    }
    .name_explain {
      margin: 12px 0 0 154px;
      height: 12px;
      font-size: 12px;
      line-height: 12px;
      color: #5c5c5c;
    }
  }
}
</style>
